<script>
export default {
  props: {
    idx: {
      type: Number,
      default: 0
    },
    itemdata: {
      type: Object,
      required: true
    }
  },
  methods: {
    play() {
      this.$goByName('player', {id: this.itemdata.id})
    }
  }
}
</script>
<template lang="pug">
.music-item.flex-center-between
  .music-item__index {{idx}}
  .music-item__info.flex-center-between
    .music-item__info-left(@click="play")
      p {{itemdata.name}}
      p.ell xxx - {{itemdata.al.name}}
    .music-item__info-right
      .iconfont.icon-mv
      .img-point
</template>
<style lang="stylus">
.music-item
  height 64px
  .music-item__index
    width 1rem
    text-align center
  .music-item__info
    flex 1
    padding-right 20px
    height 100%
    border-bottom 1px solid #EEE
    .music-item__info-left
      flex 1
      width 100px
      p
        &:last-child
          font-size 12px
          color #989898
    .music-item__info-right
      width 57px
      display flex
      .iconfont
        font-size 24px
        color #989898
        margin-right 30px
      .img-point
        width 3px
        height 20px
        margin-top 2px
        display inline-block
</style>
